<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS选择器示例</title>
    <link rel="stylesheet" href="./styles/css02_selector.css" />
  </head>
  <body>
    <h1>CSS选择器</h1>
    <p id="unique">ID选择器</p>
    <p class="box">类选择器</p>
    <p>元素选择器</p>
    <p lang="en-US">通配符常见用法</p>
    <div lang="en">ab</div>
    <pre>并集选择器 - 内容1</pre>
    <div class="special">并集选择器 - 内容2</div>
    <p class="special">交集选择器</p>
    <p data-user="username">属性选择器</p>
    <p data-user="userid">属性选择器</p>
    <p data-user="truename">属性选择器</p>
    <input type="email" value="依据类型设置背景"><br>
    <input type="text"><br>
    <a href="#">链接的伪类选择器</a>
    <div id="p-class">
      <h2>伪类选择器</h2>
      <ul>
        <li>选项1</li>
        <li>选项2</li>
        <li>选项3</li>
        <li>选项4</li>
      </ul>
      <table>
        <tr>
          <td>单元格1</td>
          <td>单元格2</td>
          <td>单元格3</td>
        </tr>
        <tr>
          <td>单元格1</td>
          <td>单元格2</td>
          <td>单元格3</td>
        </tr>
        <tr>
          <td>单元格1</td>
          <td>单元格2</td>
          <td>单元格3</td>
        </tr>
        <tr>
          <td>单元格1</td>
          <td>单元格2</td>
          <td>单元格3</td>
        </tr>
        <tr>
          <td>单元格1</td>
          <td>单元格2</td>
          <td>单元格3</td>
        </tr>
        <tr>
          <td>单元格1</td>
          <td>单元格2</td>
          <td>单元格3</td>
        </tr>
        <tr>
          <td>单元格1</td>
          <td>单元格2</td>
          <td>单元格3</td>
        </tr>
        <tr>
          <td>单元格1</td>
          <td>单元格2</td>
          <td>单元格3</td>
        </tr>
      </table>

      <input type="text" name="" id="">

    </div>

    <div id="p-element">
      <ul>
        <li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
        <li>菜单4</li>
      </ul>
    </div>

    <article class="one">
      <p>直接后代</p>
      <div>
        <p>间接后代</p>
      </div>
    </article>

    <article class="two">
      <p>直接后代</p>
      <div>
        <p>间接后代</p>
      </div>
    </article>

    <article class="three">
      <p>直接后代</p>
      <pre>相邻兄弟</pre>
      <div>
        <p>间接后代</p>
      </div>
      <pre>通用兄弟</pre>
    </article>

    <article class="four">
      <p>直接后代</p>
      <pre>相邻兄弟</pre>
      <div>
        <p>间接后代</p>
      </div>
      <pre>通用兄弟</pre>
      <div>
        <p>间接后代</p>
      </div>
      <pre>通用兄弟</pre>      
    </article>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </body>
</html>
